<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="city">
    <option >请选择省</option>;
    </select>
    <select class="city1">
    <option>请选择市</option>;

    </select>
    <select class="city2">
    <option>请选择区</option>;

    </select>

</body>
<script>
    let city = document.querySelector(".city")
    let city1 = document.querySelector(".city1")
    let city2 = document.querySelector(".city2")

    let cities;
    let cities1

    console.log(city);
    fetch("./city.json").then(function (response) {
        return response.json();
    }).then(function (data) {
        console.log(data);
        for (let k in data) {
            console.log(k);
            // city.innerHTML = `<option>省</option>`;
            city.innerHTML += `<option value="${k}">${k}</option>`;

        }
        city.addEventListener("change", function () {
            city1.innerHTML = `<option>市</option>`;
            city2.innerHTML = `<option>区</option>`;
            let cityvalue = city.value;
            for (let k in data) {
                if (cityvalue == k) {
                    for (let i in data[k]) {
                        cities = data[k];
                        console.log(i);
                        city1.innerHTML += `<option value="${i}">${i}</option>`;

                    }
                }
            }

        })
        city1.addEventListener("change", function () {
            city2.innerHTML = `<option disabled >区县</option>`;
            let cityvalue1 = city1.value;
            // if(cityvalue!=this.value){
            //     city.innerHTML="";
            // }
            // console.log(cityvalue);
            // city1.innerHTML = "";
            for (let k in cities) {
                if (cityvalue1 == k) {
                    cities1 = cities[k];
                    cities1.forEach(function (item) {
                        city2.innerHTML += `<option value="${item}">${item}</option>`;
                        console.log(item);
                    })

                }
            }

        })


    }).catch(function (err) {
        console.log(err);
    });
</script>

</html>